<template>
    <div>
        <div class="upward" v-for="item in list" :key="item.id">
            <span>{{item.username}}</span>
            <span>{{item.usering}}</span>
            <span>{{item.userphone}}</span>
            <i class="el-icon-arrow-right"></i>
        </div>
        <div class="col">
            <p></p>
            <p class="c1"></p>
            <p></p>
            <p class="c1"></p>
            <p></p>
            <p class="c1"></p>
            <p></p>
            <p class="c1"></p>
            <p></p>
            <p class="c1"></p>
            <p></p>
            <p class="c1"></p>
            <p></p>
        </div>
         <div class="big">
             <div class="make" v-for="item in list" :key="item.id">
            <div class="makes">
                <!-- <input type="checkbox" :checked="item.checked" @click="item.checked=!item.checked,checkedAll(item.checked,item.money)" > -->
            <img src="https://img1.baidu.com/it/u=1470361581,621761639&fm=26&fmt=auto" alt=""> 
            </div>
            <div class="bb" >
                <p >{{item.nickname}}(享受满1000减100服务)</p>
                <i>{{item.colorUlr}};<strong>{{item.type}}</strong></i>
                <b>￥{{item.money}}</b>
                <s>￥{{item.moneyUrl}}</s>
             </div> 
        </div>

        <div class="make" v-for="item in list" :key="item.id">
            <div class="makes">
                <!-- <input type="checkbox" :checked="item.checked" @click="item.checked=!item.checked,checkedAll(item.checked,item.money)" > -->
            <img src="https://img1.baidu.com/it/u=1470361581,621761639&fm=26&fmt=auto" alt=""> 
            </div>
            <div class="bb" >
                <p >{{item.nickname}}(享受满1000减100服务)</p>
                <i>{{item.colorUlr}};<strong>{{item.type}}</strong></i>
                <b>￥{{item.money}}</b>
                <s>￥{{item.moneyUrl}}</s>
             </div> 
        </div>
         </div>
        <div class="down" v-for="item in list" :key="item.id">
            <ul>
                <li>商品总价 <span>￥{{item.total}}</span></li>
                <li>优惠券 <span class="yuan">-￥50.0 <i class="el-icon-arrow-right"></i></span></li>
                <li>运费（快递）<span>￥{{item.ticket}}</span></li>
                <li>运费险 <span>￥{{item.insurance}}</span></li>
                <p><s>￥ {{item.close}}</s></p>
            </ul>
        </div>

        <div class="downUp">
            <strong>付款</strong>
            <s>￥ 228.0</s>
            <h3>去支付</h3>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                list:[
                    {
                        id:"77",
                        username:"北京市海淀区",
                        usering:"木子村北三胡同",
                        userphone:"木子 13689999106",
                         nickname:"包包",
                        colorUlr:"颜色：褐色",
                        type:"类型：英伦风格",
                       money:222,
                        moneyUrl:288,
                        total:"278.0",
                        ticket:"0.0",
                        insurance:"0.0",
                        close:"228.0"
                    },
                    
                ]
            }
        },
         methods:{
            me(){
                this.$router.push("/car")
            }
        }
    
    }
</script>

<style scoped>
.upward{
    width: 96vw;
    height: 15vh;
    background: #fff;
    margin-top: 1vh;
    /* position: absolute; */
    margin-left: 2vw;
    border-radius: 10px;
    /* display: flex; */
}

.upward span{
    font-size: 20px;
    line-height: 33px;
    float: left;
    width: 60vw;
    margin-left: 3vw;
}
.upward i{
    font-size: 24px;
    float: right;
    margin-top: -4vh;
    margin-right: 3vw;
}
.col{
    display: flex;
    margin-top: 1vh;
}
.col p{
    width: 6.5vw;
    height: 0.5vh;
    background: pink;
    margin-right: 5px;
}
.col .c1{
    width: 6.5vw;
    height: 0.5vh;
    background: paleturquoise;
    margin-right: 5px;
}
/* .big{
    border-bottom: 3px solid #CCCCCC;
} */
.make{
    width: 96vw;
  height: 20vh;
  border-radius: 10px;
  /* background: #fff; */
  background-color: #fff;
 background-image: linear-gradient(to top, #fff , hsla(200, 14%, 91%, 0.608));
  display: flex;
  align-items: center;
  margin: 0 auto;
  margin-bottom: 10px;
  margin-top: 1vh;
}
.makes{
    display: flex;
    align-items: center;
    justify-content: center;
}
.bb{
    line-height: 4vh;
}
/* .bb p{
    margin-bottom: 15px;
} */
.bb i{
    font-size: 14px;
    font-style:normal
    
}
.bb strong{
    font-weight:normal;
    margin-left:5px ;
}
.bb s{
  
    text-decoration: line-through;
}
.bb b{
    color:#FF6633;
    font-weight: normal;
    margin-left: -1vw;
    margin-right: 4vw;
}
.bb s{
    color: #999999;
    margin-right: 5px;
}
.make img{
    width: 23vw;
    height: 12vh;
    margin-right: 6vw;
    margin-left: 8vw;
}
.bb span{
     color: #999;
     margin: 5px 5px;
}

.down{
    width: 95vw;
    height: 30vh;
    background: #fff;
    position: absolute;
    margin-left: 2vw;
    /* margin-top: 1vh; */
    /* margin-top: 2vh; */
    /* margin: 0 auto; */
    border-radius: 10px;
    /* border-bottom: 3px solid rgb(242, 242, 242); */
}
ul{
     width: 95vw;
    height: 10vh;
}
li{
    width: 95vw;
    height: 6vh;
     display: flex; 
    justify-content: space-between;
    align-items: center;
    color: #999999;
}
.yuan{
    font-size: 14px;
    color: red;
}
.down p{
    width: 100vw;
    height: 6vh;
    background: #fff;
    font-size: 26px;
    margin-right: 0;
}
.down s{
    margin-left: 260px;
    color: red;
}
.downUp{
    width: 100vw;
    height: 10vh;
    background: #ffff;
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    background-color: #fff;
 background-image: linear-gradient(to left, #fff , hsla(198, 14%, 85%, 0.608));
}
.downUp strong{
    font-size: 24px;
    color: #666666;
    margin-left: 1vw;
    margin-right: 2vw;
}
.downUp s{
    font-size: 26px;
    color: red;
}
.downUp h3{
    width: 25vw;
    height: 6vh;
    background-color: #fff;
 background-image: linear-gradient(to top, #fff , hsla(210, 1%, 33%, 0.608));
    line-height: 6vh;
    text-align: center;
    color: #ffff;
    border-radius: 80px;
    font-size: 16px;
    margin-left: 120px;
}
.tiaozhuan{
    position: absolute;
    color: plum;
    font-size: 24px;
    top: 3vh;
    /* left: 2vw; */
}
</style>
<style>
body{
    background: #f1f1f1;
    overflow-x: hidden;
    /* margin: 0 auto; */
}
</style>
 